<template>
    <!-- 页面级别共用的 -->
    <!-- 试卷列表 -->
    <AppPageTopInfo title="我的班级" :subTitle="subTitle">
        <template #btn>
            <button class="btn-create" @click="openDialog">创建班级</button>
        </template>

    </AppPageTopInfo>

    <AppPageContent :opApi="opApi" :cols="3">
        <template v-slot="{ item }">
            <div class="box p-2">
                <div class="">
                    <AppImg :src="item.cover" style="border-radius: 5px;"></AppImg>
                </div>

                <h5 class="text-lg fw-bold mb-2 mt-4 chover">

                    {{ item.title }}

                </h5>
                <p class="text-sm">{{ item.intro }}</p>
                <div class="flex justify-between items-center mt-2 mb-4">
                    <div>
                        {{ 12 }}个课时 {{ 9 }} 个学员
                    </div>
                    <button class="btn-enter" @click="$router.push('/class/class-detail?id=' + item.id

                    )">进入班级</button>
                </div>

            </div>
        </template>

    </AppPageContent>

    <AppDialogForm @save="save" ref="refDialog" title="添加班级">
        <form action="#">
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label class="form-control-label">班级名称</label>
                        <input type="text" v-model="formData.title" class="form-control" placeholder="请输入用户名">
                    </div>


                    <div class="form-group">
                        <label class="form-control-label">级别</label>

                        <div class="wallet-method">
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="training">
                                <span class="checkmark"></span> 入门
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> 进阶
                            </label>
                            <label class="radio-inline custom_radio">
                                <input type="radio" name="optradio" v-model="formData.type" value="studio">
                                <span class="checkmark"></span> 高阶
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">教学科目</label>

                        <div class="wallet-method">
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="training">
                                <span class="checkmark"></span> Scratch
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> Python
                            </label>
                            <label class="radio-inline custom_radio">
                                <input type="radio" name="optradio" v-model="formData.type" value="studio">
                                <span class="checkmark"></span> C++
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">授课类型</label>

                        <div class="wallet-method">
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="training">
                                <span class="checkmark"></span> 线上
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> 线下
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">班级类型</label>

                        <div class="wallet-method">
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="training">
                                <span class="checkmark"></span> 常规
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> 集训
                            </label>

                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> 试听
                            </label>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </AppDialogForm>

</template>
<script setup>
import opApi from "@/api/classApi"
defineProps({
    title: {
        type: String,
        default: "标题"
    },
    subTitle: {
        type: String,
        default: "副标题"
    }
})


const formData = reactive({
    title: '测试',
    level: 'la',
    type: 'training',
    subject: 'scratch',
    learnMethod: 'online'
})

const save = async () => {
    const p = Object.assign({}, formData, { teacherID: userInfo.value.user.id, tenantID: userInfo.value.user.tenantID });
    await classApi.add(p)
    $('#addclass').modal('hide')
    search()
}

const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}
const refPageContent = ref(null)
const save1 = async () => {
    await customApi.add(formData)
    refDialog.value.close()
    refPageContent.value.search()
}
</script>